<script setup>
import {ref, onMounted} from "vue";
import {BaseImgUrl, BaseURL} from "../../utils/lshttp";
import {toAppletPage} from "../../utils/utils";
import {conUtils} from "../../utils/conUtils";
import {checkOrderPicAPI, orderDetailsAPI, submitOrderAPI} from "../../services/order";
import {useOrderInfoStore} from "../../stores/modules/orderInfo";
import {useCommonInfoStore} from "../../stores/modules/commonInfo";
const orderInfoStore = useOrderInfoStore()
const commonInfoStore = useCommonInfoStore()
const props = defineProps({
  shop: {
    type: Object
  },
  signUp: {
    type: Number
  },
  orderNoVal: {
    type: String
  },
  isUpdataBtn: {
    type: Boolean,
    default: false
  },
  isShowTakeoutBtn: {
    type: Boolean,
    default: false
  }
})
const emits = defineEmits(['editorderNo'])
const shopDetail = ref()
/* onShow(() => {
  shopDetail.value = shopDetail
  console.log('订单详情=', shopDetail.value)
}) */
// 校验通过
const isShowPass = ref(true)
// 校验未通过
const isShowFail = ref(false)
// 外卖已收到按钮是否显示
const isShowTakeoutBtn = ref(props.isShowTakeoutBtn)
// 提交凭证按钮是否显示
const isShowScreenshotBtn = ref(false)
// 去自动检测内容是否显示
const isShowAutoCheckContent = ref(false)
// 人工审核是否显示
const isShowManualReview = ref( false)
const address = ref()// 获取定位信息
onMounted(() => {
  // 获取坐标
  address.value = commonInfoStore.address
  console.log("addressDel = ", address.value)
  handleShopDetail(props.shop.id, address.value.latitude, address.value.longitude)


})
// 上传图片变量
const imgs1 = ref()
const imgs2 = ref()
const imgs3 = ref()
const elmurl1 = ref('') //订单路径
const elmurl2 = ref('') //评价路径
// 定义上传订单变量
const submitData = ref({
  order_id: '',
  user_pay_img: '',
  user_order_img: '',
  user_comment_img: '',
  is_abnormal: 0,
  user_pay_order_no: '',
  user_pay_amount: '0.00',
  user_pay_time: '',
  shop_name: '',
  text1: "",
  text2: "",
  comment_time: ''
})
const order_is_abnormal = ref(0)
const shop_is_abnormal = ref(0)
const comment_is_abnormal = ref(0)


// 外卖已收到事件
const takeoutFun = () => {
  // 隐藏外卖已收到按钮
  isShowTakeoutBtn.value = false

  if(shopDetail.value?.check_status === 2){
    // 校验通过且不需要品鉴截图
    setTimeout(()=>{
      uni.switchTab( {
        url: '/pages/order/order'
      })
    }, 1000)
  } else {
    // 隐藏订单号校验结果内容
    isShowPass.value = false
    // 校验未通过显示
    isShowFail.value = true
    // 提交凭证按钮显示
    isShowScreenshotBtn.value = true
    //去自动检测内容显示
    isShowAutoCheckContent.value =  true
  }

}
// 人工检测事件
const showReviewFun = () => {
  // 显示人工检测按钮
  isShowTakeoutBtn.value = true
  // 隐藏提交凭证按钮
  isShowScreenshotBtn.value = false
  /* 显示人工检测内容 */
  isShowManualReview.value = true
  // 去自动检测内容隐藏
  isShowAutoCheckContent.value = false
}
// 修改订单号
const isProcessTip = ref(false)
const editorderNoFun = () => {
  isProcessTip.value = false
  emits('editorderNo', {isProcessTip:isProcessTip.value, orderNoVal: props.orderNoVal})
}
// 前往APP上传截图
const toAPPScreenshot = () => {
  uni.navigateTo( {
    url: "/pages/tipdownload/tipdownload"
  })
}
// 前往人工上传截图
const isShowScreenshot = ref(false)

const toManualScreenshot = () => {
  // 前往人工上传截图显示
  isShowScreenshot.value = true
  // 提交凭证按钮显示
  isShowScreenshotBtn.value = true
}

// 去截图
const jietu = (type) => {
  toAppletPage(shopDetail.value.shop.type, type)
}
// 获取订单详情
const banner_imgs = ref([])
const handleShopDetail = async (id, lat, lng) => {
  const res = await orderDetailsAPI(id, lat, lng)
  // console.log('获取订单详情=', res.result)
  shopDetail.value = res.result
  console.log('订单详情=', shopDetail.value)

  submitData.value.order_id = res.result.id
  submitData.value.user_comment_img = res.result.user_comment_img
  submitData.value.user_order_img = res.result.user_order_img
  submitData.value.user_pay_img = res.result.user_pay_img
  submitData.value.user_pay_time = res.result.user_pay_time
  submitData.value.user_pay_order_no = res.result.user_pay_order_no
  submitData.value.shop_name = res.result.shop_name
  submitData.value.user_pay_amount = res.result.user_pay_amount
  imgs1.value = res.result.user_pay_img
  imgs2.value = res.result.user_order_img
  imgs3.value = res.result.user_comment_img
  banner_imgs.value = [res.result.example_comment_img, res.result.example_order_img, res.result.example_pay_img]
}
const previewImage = (e) => {
  const current = e.currentTarget.dataset.src;
  uni.previewImage({
    current: current,
    // 当前显示图片的http链接
    urls: banner_imgs.value // 需要预览的图片http链接列表
  });
}
// 取消上传某张图片
const handleCloseImg = async (status) => {
  if (status === 1) {
    imgs1.value = ''
    submitData.value.user_pay_order_no = ''
    submitData.value.user_pay_time = ''
    submitData.value.user_pay_img = ''
  }
  if (status === 2) {
    imgs2.value = ''
    submitData.value.shop_name = ''
    submitData.value.user_pay_amount = ''
    submitData.value.user_order_img = ''
  }
  if (status === 3) {
    imgs3.value = ''
    submitData.value.user_comment_img = ''
  }
}
const showImage = (imgPth) => {
  conUtils("showImage", imgPth)
  uni.previewImage({
    urls: imgPth,
  })
}
// 上传截图
const uploadImg = (type) => {
  conUtils("uploadImg", uploadImg)
  let imgList = []
  switch (type) {
    case 0:
      // 上传识别订单号和付款时间
      if (imgs1.value) {
        imgList.push(imgs1.value)
        showImage(imgList)
        return
      }
      break;
    case 1:
      // 上传店铺名和实付金额
      if (imgs2.value) {
        imgList.push(imgs2.value)
        showImage(imgList)
        return
      }
      break;
    case 2:
      // 上传评论
      if (imgs3.value) {
        imgList.push(imgs3.value)
        showImage(imgList)
        return
      }
      break;
  }
  uni.chooseImage({
    count: 1,
    // 默认9
    sizeType: ['original', 'compressed'],
    // 可以指定是原图还是压缩图，默认二者都有
    sourceType: ['album'],
    // 可以指定来源是相册还是相机，默认二者都有
    success: function (res) {
      // 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
      const tempFilePaths = res.tempFilePaths;
      uni.showLoading({
        title: '上传中'
      })
      uni.uploadFile({
        url: BaseURL + (type === 2 ? '/api/order/ocrFiveStarPraise' : '/api/order/upload'),
        method: 'POST',
        filePath: tempFilePaths[0],
        formData: {
          order_id: shopDetail.value?.id
        },
        name: 'file',
        success(res1) {
          conUtils("res1", res1)
          let data = JSON.parse(res1.data)
          // 订单截图
          if (type === 0 || type === 1) {
            uni.showToast({title: data.msg, icon: "none"})
            if (type === 0) {
              imgs1.value = data.result.show_path
              submitData.value.user_pay_img = data.result.path
              submitData.value.text1 = data.result.text
            } else if (type === 1) {
              imgs2.value = data.result.show_path
              submitData.value.user_order_img = data.result.path
              submitData.value.text2 = data.result.text
            }
            if (data.result.pay_time) {
              submitData.value.user_pay_time = data.result.pay_time
            }
            if (data.result.order_no) {
              submitData.value.user_pay_order_no = data.result.order_no
            }
            if (data.result.shop_name) {
              submitData.value.shop_name = data.result.shop_name
            }
            if (data.result.pay_amount) {
              submitData.value.user_pay_amount = data.result.pay_amount
            }
          } else {
            // 评价截图
            imgs3.value = data.result?.show_path
            submitData.value.user_comment_img = data.result?.path
            submitData.value.comment_time = data.result?.comment_time
            if (data.status !== 1) {
              order_is_abnormal.value = 1
              uni.showModal({
                title: data.result.title,
                content: data.result.sub_title,
                confirmText: '图片无误',
                cancelText: '重新上传',
                success(request) {
                  if (request.cancel) {
                    imgs3.value = ''
                    submitData.value.user_comment_img = ''
                  }
                }
              })
            } else {
              uni.showToast({title: data.msg, icon: "none"})
            }
          }
        }, fail(e) {
          uni.showToast({title: "上传失败" + JSON.stringify(e), icon: "none"})
        }, complete() {
          uni.hideLoading()
        }
      })
    }
  });
}
// 提交凭证
const submitVoucherFun = async () => {
  if (order_is_abnormal.value || shop_is_abnormal.value || comment_is_abnormal.value) {
    submitData.value.is_abnormal = 1
  } else {
    submitData.value.is_abnormal = 0
  }
  if (shopDetail.value?.check_status > 2) {
    if (!submitData.value.user_pay_order_no) {
      await uni.showToast({title: "识别失败，请输入订单号", icon: "none"})
      return
    }
    if (!submitData.value.user_pay_amount) {
      await uni.showToast({title: "识别失败，请输入实付金额", icon: "none"})
      return
    }
    if (!submitData.value.user_pay_img) {
      await uni.showToast({
        title: '请上传截图',
        icon: 'none'
      })
      return
    }
  }
  try {
    await checkOrderPicAPI(submitData.value)
  } catch (e) {
    uni.showModal({
      title: e.data.result.title,
      content: e.data.result.sub_title + "，如果您上传的图片无误，请点击继续上传！",
      confirmText: '继续上传2',
      cancelText: '我再看看',
      success(request) {
        submitData.value.is_abnormal = 1
        if (request.confirm) {
          submit()
        }
      }
    })
    return
  }
  orderInfoStore.setIsRefresh(true)
  uni.showToast({
    title: '上传成功',
    icon: 'none',
    duration: 2600,
    mask: true,
    success: function () {
      setTimeout(function () {
        console.log('上传成功')
        uni.switchTab({
          url: '/pages/order/order'
        })
        // uni.navigateBack();
      }, 2600);
    }
  });
}
const submit = async () => {
  await submitOrderAPI(submitData.value).then((res) => {
    orderInfoStore.setIsRefresh(true)
    uni.showToast({
      title: '上传成功',
      icon: 'none',
      duration: 2600,
      mask: true,
      success: function () {
        setTimeout(function () {
          uni.switchTab( {
            url: '/pages/order/order'
          })
          uni.navigateBack();
        }, 2600);
      }
    });
  }).catch((err) => {
    uni.showToast({
      title: err.msg,
      icon: 'none',
      duration: 2600,
      mask: true,
    });
  })
}

//跳转教程
const goTutorial = () => {
  uni.navigateTo( {
    url: '/pages_shopdetail/shop_screenshot_tutorial?orderId=' + shopDetail.value?.id + '&type=all'
  })
}
// 订单凭证示例
const orderTutorialFun = () => {
  uni.navigateTo( {
    url: '/pages_shopdetail/shop_screenshot_tutorial?orderId=' + shopDetail.value?.id + '&type=order'
  })
}
// 评价截图示例
const evaluateTutorialFun = () => {
  uni.navigateTo( {
    url: '/pages_shopdetail/shop_screenshot_tutorial?orderId=' + shopDetail.value?.id + '&type=evaluate'
  })
}
// 跳转美团h5页面
const gotoMeituanPage = async (item) => {
  console.log("item===",item)
  uni.navigateTo({
    url: "/pages_order/meituan-webview?&id=" + item.id
  })
}
</script>

<template>
  <view class="orderNo_content">
    <!--订单号校验通过 -->
    <view v-if="isShowPass" class="shop_process_takeout">
      <view class="shop_process_takeout_content">
        <view v-if="shopDetail?.check_status == 3 || shopDetail?.check_status == 4" class="closeCircle">
          <u-icon name="close-circle-fill" size="56" color="#FF7900"></u-icon>
        </view>
        <view v-if="shopDetail?.check_status == 1 || shopDetail?.check_status == 2 || shopDetail?.check_status == 5" class="checkmarkCircle"><u-icon name="checkmark-circle-fill" size="56" color="#13BF69"></u-icon></view>

        <view v-if="shopDetail?.check_status == 3 || shopDetail?.check_status == 4"  class="shop_process_takeout_title">订单号校验失败</view>
        <view v-if="shopDetail?.check_status == 1 || shopDetail?.check_status == 2 || shopDetail?.check_status == 5" class="shop_process_takeout_title">订单号校验通过</view>
        <view class="shop_process_takeout_text">收到外卖后，回到领食上传订单任务完成截图</view>
        <view class="shop_process_takeout_ipt">
          <view class="shop_process_takeout_ipt_l">
            <text style="color: #3D3D3D;">订单号：</text>
            <text style="color: #FE7B20;font-size: 28rpx;">{{ props.orderNoVal }}</text>
          </view>
          <view @click="editorderNoFun" class="shop_process_takeout_ipt_r">
            <u-icon name="edit-pen" size="24" color="#888888" ></u-icon>
            <text>修改</text>
          </view>
        </view>
      </view>
    </view>
    <!--订单号校验未通过 -->
    <view v-if="isShowFail" class="shop_process_orderNo_fail">
      <view class="shop_process_takeout_content">
        <view v-if="shopDetail?.check_status == 3 || shopDetail?.check_status == 4" class="closeCircle">
          <u-icon name="info-circle-fill" size="56" color="#FF7900"></u-icon>
        </view>
        <view v-if="shopDetail?.check_status == 3 || shopDetail?.check_status == 4"  class="shop_process_takeout_title">订单号校验未通过</view>
        <!--订单凭证自动检测-->
        <view class="order_auto_check">
          <view class="order_auto_check_title">
            <view class="order_auto_check_title_left">
              <text>订单凭证自动检测</text>
              <view class="process_review"><view class="process_review_text">秒审核</view><image :src="BaseImgUrl + '/shop/process/process_title_bg01.png'" mode="widthFix" style="width: 100%;"></image></view>
            </view>
            <view v-if="isShowManualReview" @tap="gotoMeituanPage(shopDetail)" class="order_auto_check_title_right">
              <image v-if="shopDetail?.shop.type === 1" :src="BaseImgUrl + '/shop/process/shop_meituan.png'" mode="widthFix" style="width: 40rpx;"></image>
              <image v-if="shopDetail?.shop.type === 2" :src="BaseImgUrl + '/shop/process/shop_elm.png'" mode="widthFix" style="width: 40rpx;"></image>
              <image v-if="shopDetail?.shop.type === 3" :src="BaseImgUrl + '/shop/process/shop_jd.png'" mode="widthFix" style="width: 40rpx;"></image>
              <text style="padding-left: 10rpx;font-size: 24rpx;color: #FFFFFF;">去检测</text>
            </view>
          </view>
          <!--去自动检测内容 -->
          <view v-if="isShowAutoCheckContent" class="auto_check_content">
            <view class="auto_check_content_desc">系统未识别到您提交的订单号订单状态，需要您前往美团授权进行订单状态检测</view>
            <view @tap="gotoMeituanPage(shopDetail)" class="auto_check_content_btn">
              <image v-if="shopDetail?.shop.type === 1" :src="BaseImgUrl + '/shop/process/shop_meituan.png'" mode="widthFix" style="width: 40rpx;"></image>
              <image v-if="shopDetail?.shop.type === 2" :src="BaseImgUrl + '/shop/process/shop_elm.png'" mode="widthFix" style="width: 40rpx;"></image>
              <image v-if="shopDetail?.shop.type === 3" :src="BaseImgUrl + '/shop/process/shop_jd.png'" mode="widthFix" style="width: 40rpx;"></image>
              <text style="padding-left: 10rpx;font-size: 28rpx;color: #FFFFFF;">去检测订单信息</text>
            </view>
            <view @tap="showReviewFun" class="auto_check_content_btn2">截图人工审核<u-icon name="arrow-down" size="20" color="#888888"></u-icon></view>
          </view>
          <!--人工审核 -->
          <view v-if="isShowManualReview" class="manual_review">
            <view class="manual_review_title">
              <view class="order_auto_check_title_left">
                <text>截图人工审核</text>
                <view class="process_review"><view class="process_review_text">审核需要6-12小时</view><image :src="BaseImgUrl + '/shop/process/process_title_bg02.png'" mode="widthFix" style="width: 100%;"></image></view>
              </view>
              <!-- 订单凭证 -->
              <view @tap="jietu(1)" class="order_auto_check_title_right">
                <!-- #ifdef H5 -->
                <wx-open-launch-weapp id="launch-btn"
                                      :username="shopDetail?.shop.type == 1 ? mtAppId : shopDetail?.shop.type == 2 ? elmAppId : jdAppId"
                                      :path="shopDetail?.shop.type == 1 ? mtOrderUrl : shopDetail?.shop.type == 2 ? elmOrderUrl : jdOrderUrl"
                                      style="position: absolute;z-index: 2;left: 0;width: 100%;height:100%;opacity: 0.01;background-color: #ff531a">
                  <component :is="'script'" type='text/wxtag-template' style="display: block;">
                    <div style="position: absolute;top: 0; left: 0; width: 100%;height: 100% ; opacity: 0"></div>
                  </component>
                </wx-open-launch-weapp>
                <!-- #endif -->
                <image v-if="shopDetail?.shop.type === 1" :src="BaseImgUrl + '/shop/process/shop_meituan.png'" mode="widthFix" style="width: 40rpx;"></image>
                <image v-if="shopDetail?.shop.type === 2" :src="BaseImgUrl + '/shop/process/shop_elm.png'" mode="widthFix" style="width: 40rpx;"></image>
                <image v-if="shopDetail?.shop.type === 3" :src="BaseImgUrl + '/shop/process/shop_jd.png'" mode="widthFix" style="width: 40rpx;"></image>
                <text style="padding-left: 10rpx;font-size: 24rpx;color: #888888;">去截图</text>
              </view>
            </view>
            <view class="manual_review_content">
              <view class="imgs_box">
                <view class="small_box">
                  <view @tap="uploadImg(0)" style="height: 100%">
                    <image v-if="!imgs1" :src="BaseImgUrl + '/shop/process/process_icon07.png'" mode="widthFix" style="width: 56rpx;"></image>
                    <view v-if="!imgs1" class="small_box_text">上传订单号和下单时间截图</view>
                    <view v-if="imgs1" class="upload_img"><image :src="imgs1" mode="widthFix" style="width: 100%;"></image></view>
                  </view>
                  <view class="close_icon" v-if="imgs1" @click="handleCloseImg(1)">
                    <image :src="BaseImgUrl + '/images/close.png'"></image>
                  </view>
                </view>
                <view class="small_box">
                  <view @tap="uploadImg(1)" style="height: 100%">
                    <image v-if="!imgs2" :src="BaseImgUrl + '/shop/process/process_icon07.png'" mode="widthFix" style="width: 56rpx;"></image>
                    <view v-if="!imgs2" class="small_box_text">上传店铺名和实付金额截图</view>
                    <view v-if="imgs2" class="upload_img"><image :src="imgs2" mode="widthFix" style="width: 100%;"></image></view>
                  </view>
                  <view class="close_icon" v-if="imgs2" @click="handleCloseImg(2)">
                    <image :src="BaseImgUrl + '/images/close.png'"></image>
                  </view>
                </view>
                <view @tap="orderTutorialFun" class="small_case">
                  <view class="small_case_tip">示例</view>
                  <view class="small_case_text">上传<text style="color: #FF7900;">凭证</text></view>
                  <view class="small_case_text">截图教程</view>
                  <view class="small_case_img"><image :src="BaseImgUrl + '/shop/process/process_icon08.png'" mode="widthFix" style="width: 80rpx;"></image></view>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>

    </view>
    <!--上传截图内容 -->
    <view v-if="isShowFail" class="shop_process_screenshot">
      <!--上传外卖订单凭证-->
      <view v-if="shopDetail?.check_status !== 2 && shopDetail?.check_status !== 4" class="voucher_cont" >
        <!-- 评价截图 -->
        <view class="appraise">
          <view class="qujietu">
            <view style="font-size: 28rpx;color: #3D3D3D;display: flex;align-items: center">
              <!--<image :src="BaseImgUrl + '/shop/process/process_icon06.png'" mode="widthFix" style="width: 30rpx;"></image>-->
              <text style="padding-left: 10rpx;">上传评价截图</text>
            </view>
            <view @tap="jietu(2)" style="text-align: center;">
              <!-- #ifdef H5 -->
              <wx-open-launch-weapp id="launch-btn"
                                    :username="orderDetail.shop.type == 1 ? mtAppId : orderDetail.shop.type == 2 ? elmAppId : jdAppId"
                                    :path="orderDetail.shop.type == 1 ? mtEvaluateUrl : orderDetail.shop.type == 2 ? elmEvaluateUrl : jdEvaluateUrl"
                                    style="position: absolute;z-index: 2;left: 0;width: 100%;height:100%;opacity:0.01;background-color: #ff531a">
                <component :is="'script'" type='text/wxtag-template' style="display: block;">
                  <div style="position: absolute;top: 0; left: 0; width: 100%;height: 100% ; opacity: 0"></div>
                </component>
              </wx-open-launch-weapp>
              <!-- #endif -->
              <view class="btn-open-weapp">
                <image v-if="shopDetail?.shop.type === 1" :src="BaseImgUrl + '/shop/process/shop_meituan.png'" mode="widthFix" style="width: 40rpx;"></image>
                <image v-if="shopDetail?.shop.type === 2" :src="BaseImgUrl + '/shop/process/shop_elm.png'" mode="widthFix" style="width: 40rpx;"></image>
                <image v-if="shopDetail?.shop.type === 3" :src="BaseImgUrl + '/shop/process/shop_jd.png'" mode="widthFix" style="width: 40rpx;"></image>
                <text style="padding-left: 10rpx;">去截图</text>
              </view>
            </view>
          </view>

          <!--<view class="notes" style="margin-top: 10rpx">注：{{ shopDetail?.shop_activity_ask }}</view>-->
          <view class="notesImg">
            <view class="small_box">
              <view @tap="uploadImg(2)" style="height: 100%">
                <image  v-if="!imgs3" :src="BaseImgUrl + '/shop/process/process_icon07.png'" mode="widthFix" style="width: 48rpx;"></image>
                <view v-if="!imgs3" class="small_box_text">上传评价截图</view>
                <view v-if="imgs3" class="upload_img"><image :src="imgs3" mode="widthFix" style="width: 100%;"></image></view>
              </view>
              <view class="close_icon" v-if="imgs3" @click="handleCloseImg(3)">
                <image :src="BaseImgUrl + '/images/close.png'"></image>
              </view>
            </view>
            <view @tap="evaluateTutorialFun" class="small_case">
              <view class="small_case_tip">示例</view>
              <view class="small_case_text">上传<text style="color: #FF7900;">凭证</text></view>
              <view class="small_case_text">截图教程</view>
              <view class="small_case_img"><image :src="BaseImgUrl + '/shop/process/process_icon08.png'" mode="widthFix" style="width: 80rpx;"></image></view>
            </view>
          </view>
        </view>
      </view>
      <!--自动识别订单号和金额 -->
      <view v-if="isShowManualReview" class="voucher_cont" >
        <view class="voucher_list">
          <text>订单编号：</text>
          <input type="text" name="order_sn" v-model="submitData.user_pay_order_no"
                 placeholder="订单号上传图片后自动识别"
                 placeholder-class="classVoucher">
        </view>
        <view class="voucher_list">
          <text>支付金额：</text>
          <input type="text" name="pay_num" v-model="submitData.user_pay_amount"
                 placeholder="请输入支付金额: 支付金额上传图片后自动识别"
                 placeholder-class="classVoucher">
        </view>

      </view>
    </view>

  </view>
  <!--外卖已收到按钮-->
  <view v-if="isShowTakeoutBtn" class="shop_process_takeout_btn">
    <view @click="takeoutFun" class="shop_process_takeout_btn_text">外卖已收到</view>
  </view>
  <!--提交凭证按钮-->
  <view v-if="isShowScreenshotBtn" class="shop_process_takeout_btn">
    <view @click="submitVoucherFun" class="shop_process_takeout_btn_text">提交凭证，获得返利</view>
  </view>
  <!--教程浮动按钮-->
  <view v-if="isShowScreenshot" @tap="goTutorial" class="shop_process_screenshot_tutorial">
    <view class="tutorial_box">
      <image :src="BaseImgUrl + '/shop/process/process_icon09.png'" mode="widthFix" style="width: 30rpx;"></image>
      <view style="font-size: 20rpx;color: #333333;">教程</view>
    </view>
  </view>

  <view v-if="isShowTakeoutBtn || isShowScreenshotBtn" style="height: 120rpx;"></view>

</template>

<style lang="scss">
/* 上传截图内容css */
.orderNo_content{

}
/* 订单号校验通过css */
.shop_process_takeout{
  width: 93%;
  height: 430rpx;
  margin: 20rpx auto;
  border-radius: 16rpx;
  background: #FFFFFF;
  .shop_process_takeout_content{
    padding: 30rpx;
    text-align: center;
    .shop_process_takeout_title{
      font-size: 36rpx;
      font-weight: bold;
      color: #3D3D3D;
      line-height: 50rpx;
      padding: 10rpx 0;
    }
    .shop_process_takeout_text{
      font-size: 28rpx;
      color: #666666;
      line-height: 40rpx;
      padding: 10rpx 0;
      margin-bottom: 30rpx;
    }
    .shop_process_takeout_ipt{
      height: 72rpx;
      line-height: 72rpx;
      padding: 0 20rpx;
      display: flex;
      justify-content: space-between;
      background: #FFF9F1;
      border-radius: 8rpx;
      border: 2rpx solid #FFB878;
      .shop_process_takeout_ipt_l{
        font-size: 24rpx;
      }
      .shop_process_takeout_ipt_r{
        display: flex;
        font-size: 26rpx;
        color: #888888;
      }
    }
    .closeCircle{
      display: flex;
      justify-content: center;
    }
    .checkmarkCircle{
      display: flex;
      justify-content: center;
    }
  }
}
/* 订单号校验未通过css */
.shop_process_orderNo_fail{
  width: 93%;
  margin: 20rpx auto;
  border-radius: 16rpx;
  background: #FFFFFF;
  .shop_process_takeout_content{
    padding: 30rpx;

    .closeCircle{
      display: flex;
      justify-content: center;
    }
    .shop_process_takeout_title{
      font-size: 32rpx;
      color: #FF7A00;
      line-height: 50rpx;
      padding: 10rpx 0;
      text-align: center;
    }
    /* 订单号自动检测css */
    .order_auto_check{
      margin-top: 30rpx;
      .order_auto_check_title{
        display: flex;
        justify-content: space-between;
        .order_auto_check_title_left{
          font-size: 28rpx;
          color: #333333;
          display: flex;
          align-items: center;
          .process_review{
            width: 80rpx;
            height: 30rpx;
            line-height: 28rpx;
            padding-left: 10rpx;
            position: relative;
            .process_review_text{
              position: absolute;
              top: 0;
              left: 6rpx;
              right: 0;
              bottom: 0;
              z-index: 1;
              display: flex;
              justify-content: center;
              align-items: center;
              color: #FFFFFF;
              font-size: 20rpx;
            }
          }
        }
        .order_auto_check_title_right{
          width: 140rpx;
          height: 40rpx;
          padding: 6rpx;
          display: flex;
          align-items: center;
          background: linear-gradient( 270deg, #FD9A4F 0%, #FE7B20 100%);
          border-radius: 50rpx;
        }
      }
      /* 自动检测内容css */
      .auto_check_content{
        padding: 20rpx 0;
        .auto_check_content_desc{
          background: #F4F4F4;
          border-radius: 10rpx;
          padding: 16rpx 20rpx;
          font-size: 24rpx;
          color: #666666;
          line-height: 40rpx;
          margin-bottom: 30rpx;
        }
        .auto_check_content_btn{
          width: 100%;
          height: 72rpx;
          line-height: 72rpx;
          background: linear-gradient( 270deg, #FD9A4F 0%, #FE7B20 100%);
          border-radius: 50rpx;
          display: flex;
          align-items: center;
          justify-content: center;
          margin-bottom: 20rpx;
        }
        .auto_check_content_btn2{
          width: 100%;
          height: 72rpx;
          line-height: 72rpx;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 24rpx;
          color: #888888;
        }
      }
      /* 去自动检测内容css */
      .manual_review{
        padding-top: 20rpx;
        .manual_review_title{
          display: flex;
          justify-content: space-between;
          .order_auto_check_title_left {
            font-size: 28rpx;
            color: #333333;
            display: flex;
            align-items: center;
            .process_review {
              width: 188rpx;
              height: 30rpx;
              line-height: 30rpx;
              padding-left: 12rpx;
              position: relative;

              .process_review_text {
                position: absolute;
                top: 0;
                left: 6rpx;
                right: 0;
                bottom: 0;
                z-index: 1;
                display: flex;
                justify-content: center;
                align-items: center;
                color: #FFFFFF;
                font-size: 20rpx;
              }
            }
          }
          .order_auto_check_title_right{
            width: 140rpx;
            height: 40rpx;
            padding: 6rpx;
            display: flex;
            align-items: center;
            background: #FFFFFF;
            border: 2rpx solid #E4E4E4;
            border-radius: 50rpx;
          }
        }
        .manual_review_content{
          padding-top: 20rpx;
          .close_icon {
            position: absolute;
            top: 10rpx;
            right: 10rpx;
            width: 30rpx;
            height: 30rpx;
            opacity: .7;
            background: #FFFFFF;
            border-radius: 50%;
            image {
              width: 100%;
              height: 100%;
            }
          }
        }
      }
    }
  }

}
.shop_process_screenshot{

}
/* 上传凭证css */
.voucher_cont {
  padding: 28rpx;
  box-sizing: border-box;
  margin: 20rpx;
  background: #fff;
  border-radius: 10px;
  .orderVoucher {
    overflow: hidden;
    position: relative;
    margin-bottom: 30rpx;
  }
}
.notes,
.appraise .notes {
  font-size: 26rpx;
  color: #FF7A00;
  padding: 20rpx;
  box-sizing: border-box;
  background: #FFF8E8;
  border-radius: 10rpx;
  margin-bottom: 20rpx;
}

.qujietu {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  margin-bottom: 20rpx;
  .jietu_no{
    width: 40rpx;
    height: 40rpx;
  }
  /* view:nth-child(1) {
    font-size: 28rpx;
    color: #222;
    font-weight: bold;
    box-sizing: border-box;
  } */
  .btn-open-weapp{
    height: 34rpx;
    line-height: 34rpx;
    font-size: 24rpx;
    font-weight: normal;
    color: #888888;
    padding: 8rpx 12rpx;
    border: 2rpx solid #E4E4E4;
    border-radius: 30rpx;
    display: flex;
    align-items: center;
  }
}
.imgs_box{
  display: flex;
  justify-content: left;
  .small_box {
    width: 192rpx;
    height: 192rpx;
    padding: 20rpx;
    margin-right: 30rpx;
    box-sizing: border-box;
    text-align: center;
    position: relative;
    background: #F8F8F8;
    border-radius: 16rpx;
    border: 2rpx dashed #E8E8E8;
    & .small_box_text{
      font-size: 24rpx;
      color: #888888;
      line-height: 40rpx;
    }
    & .text {
      font-size: 24rpx;
      font-weight: bold;
      margin-bottom: 20rpx;
      color: red;
    }

    & .close_icon {
      position: absolute;
      top: 10rpx;
      right: 10rpx;
      width: 30rpx;
      height: 30rpx;
      opacity: .7;
      background: #FFFFFF;
      border-radius: 50%;
      image {
        width: 100%;
        height: 100%;
      }
    }
    & .upload_img{
      width: 100%;
      height: 100%;
      overflow: hidden;
    }
  }
}



.notesImg .small_box image {
  display: inline-block;
  width: 160rpx;
  height: 160rpx;
  border-radius: 10px;
}
/* 评价截图 */
.appraise {
  width: 100%;
  box-sizing: border-box;
  margin-top: 10rpx;
  position: relative;
  background: #fff;
  border-radius: 25px;
  margin-bottom: 20px;
  .notesImg{
    display: flex;
    justify-content: left;
  }
}

.small_box {
  width: 192rpx;
  height: 192rpx;
  padding: 40rpx 20rpx;
  margin-right: 30rpx;
  box-sizing: border-box;
  text-align: center;
  position: relative;
  background: #F8F8F8;
  border-radius: 16rpx;
  border: 2rpx dashed #E8E8E8;
  & .small_box_text{
    font-size: 24rpx;
    color: #888888;
    line-height: 40rpx;
  }
  & .text {
    font-size: 24rpx;
    font-weight: bold;
    margin-bottom: 20rpx;
  }

  & .close_icon {
    position: absolute;
    top: -10rpx;
    right: 5rpx;
    width: 30rpx;
    height: 30rpx;
    opacity: .7;

    & .upload_img{
      width: 100%;
      height: 100%;
      overflow: hidden;
    }
  }
}
/* 示例css */
.small_case{
  width: 192rpx;
  height: 192rpx;
  padding: 40rpx 20rpx;
  box-sizing: border-box;
  text-align: center;
  position: relative;
  background: #FFF8E8;
  border-radius: 16rpx;
  border: 2rpx dashed #E8E8E8;
  & .small_case_text{
    font-size: 32rpx;
    font-weight: bold;
    color: #888888;
    line-height: 50rpx;
  }
  & .small_case_tip{
    width: 76rpx;
    height: 32rpx;
    line-height: 32rpx;
    text-align: center;
    font-size: 24rpx;
    color: #FFFFFF;
    background: #FF7900;
    border-radius: 16rpx 0 16rpx 0;
    position: absolute;
    top: 0;
    left: 0;
  }
  & .small_case_img{
    width: 80rpx;
    height: 80rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    left: calc(50% - 40rpx);
    top: calc(50% - 40rpx);
    z-index: 1;
  }
}
.appraiseImg image {
  width: 160rpx;
  height: 160rpx;
  margin: 0 20rpx 20rpx 0;
}

/* 上传凭证 */
.submint {
  margin: 27rpx auto;
  width: 690rpx !important;
  height: 80rpx;
  font-size: 32rpx;
  color: #fff;
  border-radius: 40rpx;
  background: linear-gradient(90deg, #fc605b, #fb9360);
}

.voucher_list {
  width: 100%;
  height: 100rpx;
  box-sizing: border-box;
  border-bottom: 1rpx solid #ebeaea;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.voucher_list:last-child {
  border-bottom: 0 solid #ebeaea;
}

.voucher_list text {
  //width: 30%;
  font-size: 28rpx;
  color: #3D3D3D;
}

.voucher_list input {
  flex: 1;
  height: 100%;
  padding: 0 10rpx;
  box-sizing: border-box;
  text-align: right;
  font-size: 28rpx;
}
/* 教程浮动按钮css */
.shop_process_screenshot_tutorial{
  width: 80rpx;
  height: 80rpx;
  position: fixed;
  right: 0;
  top: 50%;
  background: #FFFFFF;
  box-shadow: 0rpx 6rpx 14rpx 0rpx rgba(0,0,0,0.1);
  border-radius: 50%;
  .tutorial_box{
    text-align: center;
    padding: 10rpx;
  }
}
/* 外卖已收到按钮css */
.shop_process_takeout_btn{
  width: calc(100% - 60rpx);
  height: 80rpx;
  position: fixed;
  bottom: 0;
  z-index: 999;
  background: #FFFFFF;
  padding: 20rpx 30rpx env(safe-area-inset-bottom);
  box-shadow: 0 8rpx 20rpx 0 rgba(0,0,0,0.3);
  .shop_process_takeout_btn_text{
    height: 80rpx;
    line-height: 80rpx;
    font-size: 32rpx;
    color: #FFFFFF;
    text-align: center;
    background: linear-gradient( 270deg, #FF8118 0%, #FF5429 100%);
    border-radius: 50rpx;
    margin-bottom: 20rpx;
  }
}
/* 上传截图css */
.shop_process_update_btn{
  padding: 0 30rpx;
  margin-top: 80rpx;
  .shop_process_update_btn_text{
    font-size: 32rpx;
    color: #FFFFFF;
    text-align: center;
    border-radius: 50rpx;
  }
  .APPScreenshot{
    height: 88rpx;
    line-height: 88rpx;
    background: linear-gradient( 270deg, #FF8118 0%, #FF5429 100%);
    margin-bottom: 36rpx;
    position: relative;
    .APPScreenshot_img{
      position: absolute;
      top: -44rpx;
      right: 50rpx;
    }
  }
  .ManualScreenshot{
    height: 64rpx;
    line-height: 36rpx;
    background: rgba(255,255,255,0.3);
    border: 2rpx solid #D0D0D0;
    padding: 10rpx 0;
  }
}

</style>